<template>
  <a-modal :visible="visible" title="修改流水账户" @cancel="handleCancel"
           @ok="handleOk" destroy-on-close :width="600"
  >
    <div class="content-item">
      <a-form layout="vertical">
        <a-form-item label="流水账户" v-bind="validateInfos.account_id">
          <a-cascader style="width: 100%" placeholder="选择流水账户"
                      v-model:value="modelRef.account_id" :options="companyList"
                      :load-data="getAccount"/>
        </a-form-item>

      </a-form>
    </div>
  </a-modal>
</template>

<script>
import {reactive, toRefs, ref, watch} from "vue"
import {Form, message} from "ant-design-vue";
import request from '@/common/utils/request'

const useForm = Form.useForm

export default {
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    stream_ids: {
      type: Array,
      default: () => ([])
    }

  },
  setup(props, context) {
    const state = reactive({
      companyList: []
    })


    const getCompanyList = () => {
      request.get("/org", "/company/orgAndBranch").then(res => {
        console.log(res)
        state.companyList = res.list.map(item => {
          return {
            label: item.company,
            value: item.id,
            isLeaf: false
          }
        })
      })
    }

    const getAccount = (selectedOptions) => {
      const targetOption = selectedOptions[selectedOptions.length - 1];
      targetOption.loading = true;
      request
          .get("/org", "/manage/account", {
            page: 1,
            pageSize: 9999,
            org_branch_id: targetOption.value,
          })
          .then((res) => {
            if (res.list) {
              targetOption.loading = false;
              targetOption.children = res.list.map((item) => ({
                label: item.name,
                value: item.id,
                isLeaf: true,
              }));
              state.companyList = [...state.companyList];
            }
          });
    };

    const init = () => {
      getCompanyList()
    }

    watch(() => props.visible, (value) => {
      if (value) {
        init()
      } else {

      }
    })

    const modelRef = reactive({
      account_id: undefined,
    })

    const ruleRef = reactive({
      account_id: [{
        required: true,
        message: "请选择流水账户"
      }],

    })

    const {validate, resetFields, validateInfos} = useForm(modelRef, ruleRef)

    const handleCancel = () => {
      context.emit("toCancel")
    }

    const handleOk = () => {
      validate().then(() => {
        const params = {
          account_id: modelRef.account_id[1],
          stream_ids: props.stream_ids,
          branch_id: modelRef.account_id[0],
        }
        request.post("/org", "/stream/match/account", params).then(res => {
          console.log(res)
          message.success("操作成功！")
          resetFields()
          context.emit("toCancel")
        })
      })
    }

    return {
      modelRef,
      handleCancel,
      handleOk,
      validateInfos,
      ...toRefs(state),
      getAccount,

    }
  }
}
</script>

<style lang="less" scoped>


</style>